<template>
  <div class="body-xd">
    <HeaDer></HeaDer>
    <div class="top-xd">
      <div class="row-xd">
        <div class="left-xd">
          <span>当前位置：</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/hp' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/hdpxl'}">活动培训</el-breadcrumb-item>
            <el-breadcrumb-item>{{ activityInfo.activityName }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </div>
    <div class="main-xd">
      <div class="row-xd">
        <div class="left-xd">

          <h1 style="position: relative; display: flex;align-items: center;">
            <span style="width: 92%; display: inline-block;">{{ activityInfo.activityName }}</span>
            <button @click="toggleFavorite" class="favorite-btn" :class="{ 'is-favorited': isFavorited }"
                    style="position: absolute; right: 0;">
              {{ isFavorited ? '已收藏' : '收藏' }}
            </button>
          </h1>
          <div class="ceng1-xd">
            <img :src="require('../../assets/images/xd-icon_03.png')" alt="">
            <b>主办单位：</b>
            <span>{{ activityInfo.sponsor }}</span>
          </div>
          <div class="ceng1-xd" v-if="activityInfo.undertaker!==null">
            <img :src="require('../../assets/images/xd-icon_06.png')" alt="">
            <b>协办单位：</b>
            <span>{{ activityInfo.undertaker }}</span>
          </div>
          <div class="ceng1-xd" v-if="activityInfo.organizer!==null">
            <img :src="require('../../assets/images/xd-icon_06.png')" alt="">
            <b>承办单位：</b>
            <span>{{ activityInfo.organizer }}</span>
          </div>
          <div class="ceng1-xd">
            <img :src="require('../../assets/images/xd-icon_08.png')" alt="">
            <b>活动时间：</b>
            <span>{{ activityInfo.startTime }}</span>
            <span>~</span>
            <span>{{ activityInfo.endTime }}</span>
          </div>
          <div class="ceng1-xd">
            <img :src="require('../../assets/images/xd-icon_08.png')" alt="">
            <b>报名截止时间：</b>
            <span>{{ activityInfo.deadlineTime }}</span>
          </div>
          <div class="ceng1-xd">
            <img :src="require('../../assets/images/xd-icon_10.png')" alt="">
            <b>活动类别：</b>
            <span>{{ activityInfo.type }}</span>
          </div>
          <div class="ceng1-xd">
            <img :src="require('../../assets/images/xd-icon_13.png')" alt="">
            <b>活动形式：</b>
            <span>{{ activityInfo.lays }}</span>
          </div>
          <button :class="this.activityInfo.status==='报名'?'btn-bm-xd':'btn-bm-xd-no'" @click="signUp">立即报名
          </button>
          <div class="titlename-xd">活动内容</div>
          <div class="main-txt-xd">
            一、活动主题：{{ activityInfo.activityName }}
          </div>
          <div class="main-txt-xd">
            二、活动时间：{{ activityInfo.startTime }}
          </div>
          <div class="main-txt-xd">
            三、活动地点：{{ activityInfo.location }}
          </div>
        </div>
        <div class="right-xd">
          <div class="column1-xd">
            <div class="title-xd">
              {{ title_tel_xd }}
            </div>
            <div class="content-xd">
              <div class="hang-xd">
                <div class="left-xd">联系人：</div>
                <div class="right-xd">{{ activityInfo.contacts }}</div>
              </div>
              <div class="hang-xd">
                <div class="left-xd">电话：</div>
                <div class="right-xd">{{ activityInfo.telephone }}</div>
              </div>
              <div class="hang-xd">
                <div class="left-xd">活动地址：</div>
                <div class="right-xd">{{ activityInfo.location }}</div>
              </div>
            </div>
          </div>
          <div class="column2-xd">
            <div class="title-xd">
              {{ title_huodong_xd }}
            </div>
            <ul class="content-xd">
              <li v-for="item in activityInfoList">
                <div class="left-xd">
                  <img
                    :src="item.activityPicture!==null?item.activityPicture:require('../../assets/images/xl-hdpxl-img2.jpg')"
                    alt="" style="width:100px; height:100px; border-radius:50%; "/>
                </div>
                <div class="right-xd">
                  <div class="up-xd">
                    <span>{{ item.startTime }}</span>
                    <span>-</span>
                    <span>{{ item.endTime }}</span>
                    <!--										<span>{{item.time3}}</span>-->
                  </div>
                  <div class="down-xd">
                    {{ item.activityName }}
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <FooTer></FooTer>
    <!--    写一个对话框组件-->

    <el-dialog
      title="快速报名"
      :visible.sync="dialogVisible"
      width="25%"
      :close-on-click-modal="false" append-to-body
      :close-on-press-escape="false"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        class="custom-form"
        :rules="rules"
      >
        <el-form-item label="企业名称" style="margin-bottom: 20px;" prop="deptName">
          <el-input
            v-model="form.deptName"
            placeholder="请输入企业名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户名称" prop="userName" style="margin-bottom: 20px;">
          <el-input
            v-model="form.userName"
            placeholder="请输入用户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone" style="margin-bottom: 20px;">
          <el-input
            v-model="form.phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code" style="margin-bottom: 20px;">
          <div style="display: flex; align-items: center;">
            <el-input
              v-model="form.code"
              placeholder="请输入验证码"
              style="flex: 1;"
            ></el-input>
            <el-button
              type="success"
              round
              @click="sendCode(form.phone)"
              :disabled="isCounting"
              style="margin-left: 10px;"
            >
              {{ countDownText }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="display: flex; flex-direction: column; align-items: center;">
        <div style="margin-bottom: 10px;">
          <el-button type="success" @click="handleSubmit">申 请</el-button>
          <el-button @click="handleClose">取 消</el-button>
        </div>
        <div>
         <span style="font-size: 18px;">已有账号，</span><a @click="goToLogin" style="color: #409EFF;font-size: 18px; text-decoration: underline;">登录报名</a>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import HeaDer from '../../components/HomePage/header'
import FooTer from '../../components/HomePage/footer'
import {getTraining, getFiveActivity} from "@/api/activity/training";
import {getCollectionById, collectionInfo, collectionNoInfo,getMessage,registerActivity} from "@/api/index"
export default {
  data() {
    return{
      isFavorited: false,//收藏
      dialogVisible:false,
      form:{},
      isCounting: false,
      countDown: 60,
      countDownText: '获取验证码',
      breadcrumb:[
        {
          name:"首页",
          path:"{ path: '/hp' }"
        },
        {
          name:"活动培训",
          path:"{ path: '/hdpxl' }"
        },
        {
          name:"2024年娄星区创新型中小企业培育培训会",
          path:""
        }
      ],
      id:null,
      rules: {
        deptName: [
          { required: true, message: '请输入企业名称', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { len: 6, message: '验证码长度应为6位', trigger: 'blur' }
        ]
      },
      activityInfo:{},
      params:{
        pageNum: 1,
        pageSize: 5,
      },
      activityInfoList:[],
      title_xd:"2024年娄星区创新型中小企业培育培训会",
      unit_fq_xd:"株洲市天元区科技和工业信息化局",
      unit_zb_xd:"株洲市工业和信息化局、株洲市天元区人民政府",
      time1_xd:"2024-01-24 09:00",
      time2_xd:"2024-01-24 17:30",
      category_xd:"公益",
      form_xd:"线下",
      main_txt_xd:"",
      title_tel_xd:"活动联系方式",
      hang_xd:[
      ],
      title_huodong_xd:"相关活动",
      column_xd:[],
      indexInfo:null
    }
  },
  created() {
    this.id = this.$route.query.id;

    this.getActivityInfo();
    this.getFiveActivity();
    this.userFavorite();
  },
  methods:{
    userFavorite(){
      if (this.$store.state.user.token!==undefined){
        //说明已经登录了
        getCollectionById(this.id).then(res=>{
          this.indexInfo=res.data;
          console.log(this.indexInfo)
          if (res.data.isCollection==='is_col'){
            //说明已经收藏
            this.isFavorited = true;
          }else {
            this.isFavorited = false;
          }
        })
      }
    },
    handleClose(){
      this.dialogVisible=false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
       deptName: null,
        userName: null,
       phone: null,
        code: null
      };
      this.resetForm("form");
    },
    goToLogin(){
      this.$router.push("/eplogin")
    },
    //收藏
    toggleFavorite() {
      if (this.$store.state.user.token!==undefined){
        if (this.isFavorited){
          //取消收藏
          this.indexInfo.isCollection = "no_col"
          collectionNoInfo(this.indexInfo).then(res=>{
            if (res.code===200){
              this.$message.success("取消收藏成功");
              this.isFavorited = !this.isFavorited;
            }else {
              this.$message.error("收藏失败");
            }
          })
        }else {
          //收藏
          this.indexInfo.isCollection = "is_col"
          collectionInfo(this.indexInfo).then(res=>{
            if (res.code===200){
              this.$message.success("收藏成功");
              this.isFavorited = !this.isFavorited;
            }else {
              this.$message.error("收藏失败");
            }
          })
        }

      }else {
        this.$message.error('请先登录！');
      }

    },
    sendCode(phone) {
      if (phone===undefined || phone==='') return this.$message.error('请输入手机号');
      if (this.isCounting) return;
      //发送验证码
      getMessage(phone).then(res=>{
        if (res.code===200){
          this.$message.success("验证码发送成功");
        }else {
          this.$message.error(res.msg);
        }
      })
      // 开始倒计时
      this.isCounting = true;
      this.countDownText = `${this.countDown}秒后重试`;

      const timer = setInterval(() => {
        this.countDown--;
        this.countDownText = `${this.countDown}秒后重试`;

        if (this.countDown <= 0) {
          clearInterval(timer);
          this.isCounting = false;
          this.countDown = 60;
          this.countDownText = '获取验证码';
        }
      }, 1000);
    },
    //
    getActivityInfo() {
      getTraining(this.id).then(res=>{
        this.activityInfo=res.data;
        if (res.data.sponsor!==null){
          this.activityInfo.sponsor=res.data.sponsor.replace(/,/g, '、');
        }
        if (res.data.undertaker!==null){
          this.activityInfo.undertaker=res.data.undertaker.replace(/,/g, '、');
        }
        if (res.data.organizer!==null){
          this.activityInfo.organizer=res.data.organizer.replace(/,/g, '、');
        }
      })
    },
    signUp(){
      if ( this.activityInfo.status==='报名'){
          if(this.$store.state.user.info===undefined){
            this.dialogVisible=true;
          }else {
            this.$router.push({path:'/activityinfo/receive',query: {
                activityId: this.activityInfo.activityId,
                open: this.activityInfo.status === '报名',
              }});
          }
      }
      // if (this.$store.state.user.info!==undefined && this.activityInfo.status==='报名'){
      //   this.$router.push({path:'/activityinfo/receive',query: {
      //       activityId: this.activityInfo.activityId,
      //       open: this.activityInfo.status === '报名',
      //     }});
      // }
      // if (this.$store.state.user.info===undefined && this.activityInfo.status==='报名'){
      //   localStorage.setItem("id",this.id)
      //   this.$router.push("/eplogin")
      // }
    },
    getFiveActivity(){
      this.params.activityId=this.id;
      getFiveActivity(this.params).then(res=>{
        this.activityInfoList=res.rows;
      })
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
         this.form.activityId=this.id;
          registerActivity(this.form).then(res=>{
            if (res.code===200){
              this.$message.success(res.msg);
              this.dialogVisible=false;
              this.reset();
            }else {
              this.$message.error(res.msg);
              this.dialogVisible=false;
              this.reset();
            }
          })
        }
      });
    },
  },
  components: {
    HeaDer,
    FooTer
  },
}
</script>

<style scoped>
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
.body-xd{
  height: 100%;
  width:100%;
  font-size: 14rem;
  font-family:PingFang SC,Microsoft YaHei,Arial, sans-serif;
  color: #384a66;
}
.custom-dialog {
  width: 40%;
}

.custom-form {
  padding: 20px;
}



.custom-button:disabled {
  color: #ccc;
}
.row-xd{
  width:1532rem;
  margin: 0 auto;
}
.top-xd{
  width:100%;
  height:64rem;
  background-color: #f8f9fb;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  box-shadow: 1rem 3rem rgba(0, 0, 0, .03);
}
.top-xd>.row-xd>.left-xd{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.main-xd{
  width: 100%;
}
.main-xd>.row-xd{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  padding-top: 45rem;
  padding-bottom: 166rem;
}
.main-xd>.row-xd>.left-xd{
  width: 1053rem;
}
.main-xd>.row-xd>.left-xd>h1{
  font-size: 24rem;
  margin-bottom: 30rem;
}
.main-xd>.row-xd>.left-xd>.ceng1-xd{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-top:12rem;
}
.main-xd>.row-xd>.left-xd>.ceng1-xd>img{
  width: 16rem;
  height: 16rem;
  margin-right: 10rem;
}
.main-xd>.row-xd>.left-xd>.ceng1-xd>b{
  font-weight: 500;
}
.btn-bm-xd{
  width: 200rem;
  height: 60rem;
  background-color: #2fc23d;
  border-radius: 2rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content:center;
  border: none;
  color: white;
  font-size: 18rem;
  margin-top: 25rem;
  cursor: pointer;
}

.btn-bm-xd-no{
  width: 200rem;
  height: 60rem;
  background-color: #7b7b7b;
  border-radius: 2rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content:center;
  border: none;
  color: white;
  font-size: 18rem;
  margin-top: 25rem;
  cursor: pointer;
}
.titlename-xd{
  background: url(../../assets/images/pd-img_12.png) no-repeat scroll;
  background-position: bottom;
  display: inline-block;
  padding-bottom: 20rem;
  margin-top: 30rem;
}
.main-txt-xd{
  margin-top: 20rem;
  line-height: 32rem;
}
.column1-xd{
  width: 410rem;
  border-radius: 5rem;
  margin-bottom: 42rem;
  background-color: #f5f5f5;
  padding-left: 20rem;
  padding-right: 20rem;
}
.column1-xd>.title-xd{
  width: 100%;
  height: 62rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 16rem;
  color: #343434;
  font-weight: bold;
  border-top-left-radius: 5rem;
  border-top-right-radius: 5rem;
  border-bottom: solid 1px #dedede;
}
.column1-xd .content-xd{
  width: 100%;
  height: 145rem;
  padding-top: 20rem;
}
.column1-xd .content-xd .hang-xd{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  line-height: 32rem;
}
.column2-xd{
  width: 410rem;
  border-radius: 5rem;
  margin-bottom: 42rem;
  background-color: #f5f5f5;
  padding-left: 20rem;
  padding-right: 20rem;
}
.column2-xd>.title-xd{
  width: 100%;
  height: 62rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 16rem;
  color: #343434;
  font-weight: bold;
  border-top-left-radius: 5rem;
  border-top-right-radius: 5rem;
  border-bottom: solid 1px #dedede;
}
.column2-xd .content-xd{
  width: 100%;
  height:816rem;
  padding-top: 20rem;
  overflow-y: auto;
}
.column2-xd>.content-xd::-webkit-scrollbar {
  width: 4px;
  /* height: 4px; */
}

.column2-xd>.content-xd::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.1);
}

.column2-xd>.content-xd::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px white;
  border-radius: 0;
  /* background: white; */
}
.column2-xd>.content-xd>li{
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border-bottom: solid 1px #dedede;
  height: 158rem;
  align-items: center;
}
.column2-xd>.content-xd>li:last-child{
  border-bottom:none;
}
.column2-xd>.content-xd>li>.left-xd{
  width: 100rem;
  height: 100rem;
}
.column2-xd>.content-xd>li>.left-xd>img{
  width: 100%;
  height: 100%;
}
.column2-xd>.content-xd>li>.right-xd{
  width: 232rem;
  margin-left: 20rem;
}
.column2-xd>.content-xd>li>.right-xd>.up-xd{
  margin-bottom: 6rem;
  color: #585756;
}
.column2-xd>.content-xd>li>.right-xd>.up-xd>span:nth-child(2){
  padding-left: 6rem;
  padding-right: 6rem;
}
.column2-xd>.content-xd>li>.right-xd>.down-xd{
  font-size: 16rem;
  color: #222222;
  overflow-y: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
}
/* 收藏 */
.favorite-btn{
  padding:10px 0;
  width: 80px;
  border:none;
  border-radius: 5px;
  font-size: 16px;
  color:#606266;
  background: #E5E7E9;
  cursor: pointer;
}
.is-favorited {
  color: white;
  background: #33AD61;
}
</style>
